<template>
  <div class="dns-account-details">
    <!-- 账号信息 -->
    <section class="account-info">
      <h2>账号信息</h2>
      <div class="info-grid">
        <div class="info-item">
          <strong>账号说明：</strong>
          <span>{{ providersInfo.accountDescription }}</span>
        </div>
        <div class="info-item">
          <strong>服务商：</strong>
          <template>
            <dict-tag :options="dict.type.edge_dns_providers" :value="providersInfo.providerType"/>
          </template>
        </div>
        <div class="info-item">
          <strong>API密钥：</strong>
          <span>{{ providersInfo.apiKey }}</span>
        </div>
        <div class="info-item">
          <strong>账号邮箱：</strong>
          <span>{{ providersInfo.apiUrl }}</span>
        </div>
      </div>
    </section>

    <!-- 管理的域名 -->
    <section class="managed-domains">
      <div class="header">
        <h2>管理的域名</h2>
        <div class="buttons">
          <button @click="refreshDomains" class="primary-btn">刷新域名</button>
          <button @click="addDomain" class="secondary-btn">添加域名</button>
        </div>
      </div>
    </section>

    <!-- 域名列表 -->
    <section class="domain-list">
      <table>
        <thead>
        <tr>
          <th>域名</th>
          <th>线路</th>
          <th>集群</th>
          <th>节点域名</th>
          <th>网站域名</th>
          <th>数据更新时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(domain, index) in providerManageDnsList" :key="index">
          <td>{{ domain.domain }}</td>
          <td>{{ domain.line || '0个' }}</td>
          <td>{{ domain.cluster || '0个' }}</td>
          <td>{{ domain.nodeDomain || '0个' }}</td>
          <td>{{ domain.websiteDomain || '0个' }}</td>
<!--          <td>{{ domain.lastUpdated || '尚未更新' }}</td>-->
          <td>{{ domain.lastUpdated}} </td>
          <td class="actions">
            <button v-if="!domain.synced" @click="syncDomain(index)" class="sync-btn">同步</button>
            <button @click="modifyDomain(domain)" class="edit-btn">修改</button>
            <button @click="deleteDomain(domain)" class="delete-btn">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>

<script>
import {DnsInfoByAccount} from "@/api/dns/providers";

export default {
  dicts: ['edge_dns_providers'],
  data() {
    return {
      providersInfo:{},
      providerManageDnsList:[]
    };
  },
  created() {
    this.providersInfo = this.$route.params.providersInfo
    this.getDnsInfoByAccount();
  },
  methods: {
    getDnsInfoByAccount(){
      const data = {
        apiUrl: this.providersInfo.apiUrl,
        apiKey: this.providersInfo.apiKey
      };
      DnsInfoByAccount(data).then(response => {
        this.providerManageDnsList = response.data.domainList;
        this.providerManageDnsList.forEach((item)=>{
          item.lastUpdated=''
        })
        console.log(this.providerManageDnsList,'this.providerManageDnsLis1t')
        this.loading = false;
      });
    },
    refreshDomains() {
      console.log('刷新域名');
    },
    addDomain() {
      console.log('添加域名');
    },
    syncDomain(index) {
      this.$confirm('确认要同步此域名下的所有解析记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          console.log(index)
          this.providerManageDnsList[index].lastUpdated = new Date().toISOString().replace('T', ' ').substring(0, 19);
        console.log(this.providerManageDnsList)
      }).catch(() => {

      });
    },
    modifyDomain(domain) {
      console.log(`修改域名: ${domain.name}`);
    },
    deleteDomain(domain) {
      console.log(`删除域名: ${domain.name}`);
    }
  }
};
</script>

<style scoped lang="scss">
.dns-account-details {
  padding: 30px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: auto;
  font-family: 'Arial', sans-serif;
  color: #333;
}

.account-info {
  background: white;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}

strong {
  color: #2c3e50;
}

span {
  color: #7f8c8d;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.buttons button {
  margin-left: 10px;
}

button {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: 0.3s ease-in-out;
}

.primary-btn {
  background-color: #34495e;
  color: white;
}

.primary-btn:hover {
  background-color: #2c3e50;
}

.secondary-btn {
  background-color: #7f8c8d;
  color: white;
}

.secondary-btn:hover {
  background-color: #95a5a6;
}

.sync-btn {
  background-color: #16a085;
  color: white;
}

.sync-btn:hover {
  background-color: #1abc9c;
}

.edit-btn {
  background-color: #f39c12;
  color: white;
}

.edit-btn:hover {
  background-color: #e67e22;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

th {
  background-color: #ecf0f1;
  color: #34495e;
  font-weight: 600;
}

tr:hover {
  background-color: #f5f5f5;
}

.actions button {
  margin: 0 5px;
}

.domain-list table {
  width: 100%;
  border-collapse: collapse;
}
.domain-list th,
.domain-list td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.domain-list th {
  background-color: #f2f2f2;
}
.actions button {
  margin-right: 5px;
}
</style>
